<template>
  <div>
    <div class="box-card">
      <div class="box-header">
        <el-form :model="form" ref="form" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="7">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="form.keyword"
                  placeholder="请根据文章标题搜索"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="状态" prop="state">
                <el-select placeholder="请选择" v-model="form.state">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button class="header-btn" @click="clearInput">清空</el-button>
              <el-button type="primary" class="header-btn" @click="searchInput"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="2" style="margin-left: -10px">
              <el-button
                type="success"
                class="header-right"
                @click="openDialog('add')"
                ><i class="el-icon-edit"></i> 新增技巧</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <div class="header-content">
          <i class="el-icon-info"></i>
          <span>数据一共{{ total }}条</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f5' }"
      >
        <el-table-column prop="index" label="序号"> </el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template #default="{ row }">
            <span>{{ row.title }}</span>
            <el-link
              v-if="row.videoURL"
              icon="el-icon-film"
              style="color: #00f; font-size: 18px"
              :underline="false"
              @click="changeVideo"
            ></el-link>
            <div v-show="flag" class="video-preview">
              <el-button
               class="close"
                type="info"
                icon="el-icon-close"
                circle
                @click="changeInfo"
              ></el-button>
              <div class="box" @click="changeInfo">
                <video :src="row.videoURL"></video>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="150px">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <span>{{ row.state ? '已启用' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="{ row }">
            <el-button type="text" @click="openDialog('view', row)"
              >预览</el-button
            >
            <el-button
              type="text"
              v-if="!row.state"
              @click="changeStates('use', row)"
              >启用</el-button
            >
            <el-button type="text" v-else @click="changeStates('no', row)"
              >禁用</el-button
            >
            <el-button
              type="text"
              @click="openDialog('edit', row)"
              :disabled="row.state ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="open(row)"
              :disabled="row.state ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        :total="total"
        layout="prev,pager, next,sizes, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="diologTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="50%"
    >
      <!-- todo预览内容 -->
      <div class="article-preview" v-if="titleType === 'view'">
        <h2>{{ views.title }}</h2>
        <div>
          <span>{{ views.createTime }}{{ '\xa0\xa0' }} </span>
          <span>{{ views.username }}{{ '\xa0\xa0' }}</span>
          <i class="el-icon-view">{{ '\xa0\xa0' }}</i>
          <span>{{ views.visits }}</span>
        </div>
        <div v-html="views.articleBody" class="content"></div>
      </div>
      <el-form
        v-else
        :model="formBase"
        ref="formBase"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="formBase.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quillEditor
            v-model="formBase.articleBody"
            class="quill"
            @blur="$refs.formBase.validateField('articleBody')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="formBase.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="addOrUpdataData">确认</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  add,
  update,
  detail,
  changeState
} from '@/api/hmmm/articles.js'

// 引入富文本组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      form: {
        keyword: '',
        state: ''
      },
      // 弹框表单
      formBase: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ]
      },
      dialogFormVisible: false,
      titleType: 'add',
      id: '',
      flag: false,
      views: ''
    }
  },

  async created () {
    this.initTable()
  },

  methods: {
    // 清空表单内容
    clearForm () {
      this.formBase = {
        title: '',
        articleBody: '',
        videoURL: null
      }
    },
    async initTable () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize
      })
      console.log(data)
      data.items = data.items.map((item, index) => {
        const obj = { index: index + 1 }
        item = { ...obj, ...item }
        item.createTime = this.$moment(item.createTime).format(
          'YYYY-MM-DD hh:mm:ss'
        )
        return item
      })
      this.tableData = data.items
      this.total = data.counts
    },
    // pagesize改变时
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.initTable()
    },
    // page改变时
    handleCurrentChange (val) {
      this.page = val
      this.initTable()
    },
    // 清空input
    clearInput () {
      this.clearForm()
      this.initTable()
    },
    // 搜索input
    async searchInput () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        ...this.form
      })
      console.log(data)
      this.tableData = data.items
      this.total = data.total
    },
    // 对话框取消按钮
    closeDialog () {
      this.clearForm()
      if (this.typeTitle !== 'view') {
        this.$refs.formBase.resetFields()
      }
      this.dialogFormVisible = false
    },

    // 点击新增用户按钮
    async openDialog (type, row) {
      this.titleType = type
      if (type === 'edit') {
        const { data } = await detail(row)
        console.log(data)
        this.formBase = data
        this.id = data.id
      }
      if (type === 'view') {
        // TODO预览内容
        this.views = row
        console.log(this.views)
      }
      this.dialogFormVisible = true
    },

    // 删除 取消确认按钮
    open (row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发删除请求
          await remove(row)
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })
        })
    },
    // 新增和修改
    async addOrUpdataData () {
      try {
        this.$refs.form.validate()
        if (this.titleType === 'add') {
          const data = await add(this.formBase)
          console.log(data)
        } else if (this.titleType === 'edit') {
          const data = await update({ id: this.id, ...this.formBase })
          console.log(data)
        }
        this.closeDialog()
        this.initTable()
        this.$message.success(
          this.titleType === 'add' ? '添加成功' : '修改成功'
        )
        this.dialogFormVisible = false
      } catch (error) {
        this.$message.error('请填入必填项')
      }
    },
    // 启用 禁用
    async changeStates (type, row) {
      if (type === 'use') {
        row.state = 1
        const data = await changeState(row)
        console.log(data)
        this.initTable()
      }
      if (type === 'no') {
        row.state = 0
        await changeState(row)
        this.initTable()
      }
    },
    // 视频
    changeVideo () {
      this.flag = true
    },
    changeInfo () {
      console.log(1111)
      this.flag = false
    }
  },
  computed: {
    diologTitle () {
      if (this.titleType === 'add') return '新增文章'
      if (this.titleType === 'edit') return '修改文章'
      if (this.titleType === 'view') return '预览文章'
      else return 'add'
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  .header-content {
    background-color: #f4f4f5;
    color: #909399;
    font-size: 13px;
    padding-left: 8px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    .el-icon-info {
      margin-right: 5px;
    }
  }
}
.edit1 {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
}
.edit2 {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
.edit3 {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover {
    background-color: #e6a23c;
    color: #fff;
  }
}
.edit4 {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.el-pagination {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}

.el-dialog {
  .article-preview {
    h2 {
      color: #606266;
      margin-top: -10px;
    }
    .content {
      height: 50px;
      border-top: 1px dashed #ccc;
      background: #f5f5f5;
      margin-top: 10px;
      padding: 0 10px;
    }
  }
  .quill {
    display: inline-block;
    height: 200px;
  }
  .dialog-footer {
    display: flex;
    justify-content: end;
    padding-top: 30px;
  }
}
.video-preview {
  position: fixed;
  width: 60%;
  height: 60%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(179, 176, 176, 0.1);
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translate(-50%);
    background: #898989;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
